<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="utf-8" />
	<title>个人注册</title>
	<link rel="icon" href="/static/reg/img/favicon.ico">
	<link rel="stylesheet" type="text/css" href="/static/reg/bootstrap/css/bootstrap.css" />
	<link rel="stylesheet" type="text/css" href="/static/reg/css/index.css">
	<script src="/static/reg/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="/static/reg/js/index.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
	<header>
		<a href="http://yomall.com" class="logo">
			<img src="/static/reg/img/logo.png" alt="">
		</a>
		<div class="desc">欢迎注册</div>
		<div class="dfg">
			<span>已有账号？</span>
			<a href="http://auth.yomall.com/login.html">请登录</a>
		</div>
	</header>
	<section>
		<form action="/reg" method="post" class="one">
			<div class="tips" style="color: red;margin-bottom: 10px"
				 th:text="${errors!=null?(#maps.containsKey(errors, 'msg')?errors.msg:''):''}"></div>
			<div class="register-box">
				<label class="username_label">用 户 名
					<input id="username" name="username" maxlength="12" type="text" placeholder="用户名和登录名">
				</label>
				<div id="user_tips" class="tips" th:text="${errors!=null?(#maps.containsKey(errors, 'username')?errors.username:''):''}"></div>
			</div>
			<div class="register-box">
				<label class="other_label">设 置 密 码
					<input name="password" maxlength="18" type="password" placeholder="建议至少使用两种字符组合">
				</label>
				<div class="tips" th:text="${errors!=null?(#maps.containsKey(errors, 'password')?errors.password:''):''}"></div>
			</div>
			<div class="register-box">
				<label class="other_label">确 认 密 码
					<input maxlength="18" type="password" placeholder="请再次输入密码">
				</label>
				<div class="tips"></div>
			</div>
			<div class="register-box">
				<label class="other_label">手 机 号 码
					<input id="mobile" name="mobile" class="phone" maxlength="11" type="text" placeholder="建议使用常用手机">
				</label>
				<div id="mobile_tips" class="tips" th:text="${errors!=null?(#maps.containsKey(errors, 'mobile')?errors.mobile:''):''}"></div>
			</div>
			<div class="register-box">
				<label class="other_label">验 证 码
					<input name="code" maxlength="6" type="text" placeholder="请输入验证码" class="caa">
				</label>
				<a id="sendCode" href="javascript:void(0)">发送验证码</a>
				<div class="tips" th:text="${errors!=null?(#maps.containsKey(errors, 'code')?errors.code:''):''}"></div>
			</div>
			<div class="arguement">
				<input type="checkbox" id="xieyi"> 阅读并同意
				<a href="#">《优品用户注册协议》</a>
				<a href="#">《隐私政策》</a>
				<div class="tips"></div>
				<br />
				<div class="submit_btn">
					<button type="submit" id="submit_btn">立 即 注 册</button>
				</div>
			</div>
		</form>

		<div class="two">
			<div class="right_r">
				<div class="right_r1">
					<img src="/static/reg/img/a65a18e877a16246a92e1b755bd88a03_03.png" />
					<span>企业用户注册</span>
				</div>
				<div class="right_r2">
					<img src="/static/reg/img/a65a18e877a16246a92e1b755bd88a03_06.png" />
					<span>INTERNATIONAL <br /> CUSTOMERS</span>
				</div>
			</div>
		</div>
	</section>

	<hr>

	<div class="footer">
		<ul>
			<li>
				<a href="">关于我们</a>
			</li>
			<li>|</li>
			<li>
				<a href="">联系我们</a>
			</li>
			<li>|</li>
			<li>
				<a href="">人次招聘</a>
			</li>
			<li>|</li>
			<li>
				<a href="">商家入驻</a>
			</li>
			<li>|</li>
			<li>
				<a href="">广告服务</a>
			</li>
			<li>|</li>
			<li>
				<a href="">手机优品</a>
			</li>
			<li>|</li>
			<li>
				<a href="">友情链接</a>
			</li>
			<li>|</li>
			<li>
				<a href="">销售联盟</a>
			</li>
			<li>|</li>
			<li>
				<a href="">优品社区</a>
			</li>
			<li>|</li>
			<li>
				<a href="">优品公益</a>
			</li>
			<li>|</li>
			<li>
				<a href="">English Site</a>
			</li>
		</ul>

		<p class="bq">Copyright &copy; 2020-2021 优品yomall.com 版权所有</p>
	</div>

	<script>
		$(function(){
			// 校验用户是否存在
			$('#username').blur(function(){
				let username = $(this).val()
				if (username.trim() !== '') {
					let url = `/check/user/${username}`
					$.get(url, function(data){
						if (data.code != 0){
							$('#user_tips').text('用户已存在')
							$('#user_tips').css({'color':'red'})
							return false
						}
					})
				}
			})

			// 发送短信验证码
			$('#sendCode').click(function(){
				let mobile = $('#mobile').val()
				// 手机号检验
				if (!checkMobile(mobile)) {
					return ;
				}
				if (!$(this).hasClass('disabled')){
					// 手机发送验证码
					let url = `/sms/sendcode?mobile=${mobile}`
					$.get(url, function(data){
						if(data.code !== 0){
							alert(data.msg)
						}
					})
					// 倒计时
					timeoutChangeMsg()
				}
				return false
			})
		})

		let num = 60
		function timeoutChangeMsg(){
			$('#sendCode').attr('class', 'disabled')
			if (num === 0){
				$('#sendCode').attr('class', '')
				$('#sendCode').text('发送验证码')
				num = 60
			} else {
				let msg = `${num}秒后再次发送`
				$('#sendCode').text(msg)
				setTimeout('timeoutChangeMsg()', 1000)
			}
			num--
		}

		// 校验手机号码是否存在
		function checkMobile(mobile){
			let flag = false;
			if(mobile === '' || mobile.trim().length === 0) {
				$('#mobile_tips').text('手机号不能为空')
				$('#mobile_tips').css({'color':'red'})
				return flag;
			} else if (!/^[1](([3][0-9])|([4][0,1,4-9])|([5][0-3,5-9])|([6][2,5,6,7])|([7][0-8])|([8][0-9])|([9][0-3,5-9]))[0-9]{8}$/.exec(mobile)) {
				$('#mobile_tips').text('手机号格式不正确')
				$('#mobile_tips').css({'color':'red'})
				return flag;
			} else {
				// 检查手机号是否已存在
				let url = `/check/mobile/${mobile}`
				$.ajax({
					type: 'GET',
					url: url,
					dataType: 'json',
					async: false,
					success: function (data) {
						if (data.code != 0){
							$('#mobile_tips').text('手机号已存在')
							$('#mobile_tips').css({'color':'red'})
						} else {
							flag = true;
						}
					}
				})
			}
			return flag;
		}
	</script>
</body>

</html>